<template>
  <view class="page-index">
    <scroll-view
      scroll-x
      class="bg-white nav top-label-tab"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view
        class="cu-item"
        :class="TabCur == 0 ? 'text-green cur' : ''"
        :data-id="0"
        @tap="tabSelect"
        >全部</view
      >
      <view
        class="cu-item"
        :class="index + 1 == TabCur ? 'text-green cur' : ''"
        v-for="(label, index) in labels"
        :key="index + 1"
        @tap="tabSelect"
        :data-id="index + 1"
      >
        {{ label.name }}
      </view>
    </scroll-view>
    <div class="top-label-tab-placeholder"></div>

    <view v-for="item in list" :key="item.id" class="cu-card article list-item" @tap="gotoDetail(item)">
      <view class="cu-item shadow">
        <view class="title">
          <view class="text-cut">{{ item.title }}</view></view>
        <view class="content">
          <view class="desc">
            <view class="text-content">{{ item.body.substring(0, 200) }}{{ item.body.length > 200 ? '...' : ''}}</view>
            <view class="label-block">
              <view v-for="label in item.labels" :key="label.id" class="cu-tag light sm round" :style="{ background: '#' + label.color, color: '#fff' }">{{ label.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { getIssuesList, getLabelList } from '@/api/issues'

interface label {
  [propName: string]: any
  name: string
}

interface iData {
  [propName: string]: any
  labels: label[]
}

export default Vue.extend({
  data(): iData {
    return {
      title: 'Hello',
      labels: [],
      TabCur: 0,
      scrollLeft: 0,
      list: [],
      page: 1,
      limit: 10
    }
  },
  onLoad() {
    this.getLabelList()
    this.getList()
  },
  methods: {
    async getList() {
      const data: any = await getIssuesList({
        page: this.page,
        per_page: this.limit,
        ...(!this.TabCur ? {} : { labels: this.labels[this.TabCur - 1].name })
      })
      console.log('获取issues列表', data)
      this.list = data.data
    },
    // 获取标签
    async getLabelList() {
      const data: any = await getLabelList()
      console.log('获取 label 列表', data)
      this.labels = data.data
    },
    tabSelect(e: any) {
      this.TabCur = Number(e.currentTarget.dataset.id)
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      this.getList()
    },
    // 跳转博客详情
    gotoDetail(item: { number: string }) {
      uni.navigateTo({
        url: '/pages/index/detail?number=' + item.number
      })
    }
  }
})
</script>

<style lang="scss">
.page-index {
  .top-label-tab {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .top-label-tab-placeholder {
    height: 50px;
  }
  .list-item {
    .cu-item {
      margin-bottom: 0;
      .label-block {
        margin-top: 10px;
      }
    }
    &:last-of-type {
      .cu-item {
        margin-bottom: 16px;
      }
    }
  }
}
</style>
